<template>
  <div class="order_index">
    <header class="top">
        <span>消费记录</span>
        <span @click="show = true">{{selected.name}}<span class="icon"></span></span>
    </header>
    <section class="center">
      <nuxt-link class="item" :to="'/' + enterpriseId + '/order/details/123'" tag="div">
        <div class="left">
          <span class="cont">消费 - 油品 - 95# 车用汽油</span>
          <span class="time">2021-09-01 05:06</span>
        </div>
        <div class="right">
        - 200 元
        </div>
      </nuxt-link>      
      <nuxt-link class="item" :to="'/' + enterpriseId + '/order/details/123'" tag="div">
        <div class="left">
          <span class="cont">充值 - 支付宝</span>
          <span class="time">2021-09-01 05:06</span>
        </div>
        <div class="right add">
        + 200 元
        </div>
      </nuxt-link>  
     <nuxt-link class="item" :to="'/' + enterpriseId + '/order/details/123'" tag="div">
        <div class="left">
          <span class="cont">消费 - 油品 - 95# 车用汽油</span>
          <span class="time">2021-09-01 05:06</span>
        </div>
        <div class="right ">
        - 200 元
        </div>
      </nuxt-link>  
      <nuxt-link class="item" :to="'/' + enterpriseId + '/order/details/123'" tag="div">
        <div class="left">
          <span class="cont">充值 - 微信 </span>
          <span class="time">2021-09-01 05:06</span>
        </div>
        <div class="right add">
        + 200 元
        </div>
      </nuxt-link>  
       <nuxt-link class="item" :to="'/' + enterpriseId + '/order/details/123'" tag="div">
        <div class="left">
          <span class="cont">消费 - 油品 - 95# 车用汽油</span>
          <span class="time">2021-09-01 05:06</span>
        </div>
        <div class="right ">
        - 200 元
        </div>
      </nuxt-link>  
      <nuxt-link class="item" :to="'/' + enterpriseId + '/order/details/123'" tag="div">
        <div class="left">
          <span class="cont">充值 - 微信 </span>
          <span class="time">2021-09-01 05:06</span>
        </div>
        <div class="right add">
        + 200 元
        </div>
      </nuxt-link>  
       <nuxt-link class="item" :to="'/' + enterpriseId + '/order/details/123'" tag="div">
        <div class="left">
          <span class="cont">消费 - 油品 - 95# 车用汽油</span>
          <span class="time">2021-09-01 05:06</span>
        </div>
        <div class="right ">
        - 200 元
        </div>
      </nuxt-link>  
      <nuxt-link class="item" :to="'/' + enterpriseId + '/order/details/123'" tag="div">
        <div class="left">
          <span class="cont">充值 - 微信 </span>
          <span class="time">2021-09-01 05:06</span>
        </div>
        <div class="right add">
        + 200 元
        </div>
      </nuxt-link>  
    </section>
    <footer class="bottom">
    <van-pagination
      v-model="queryForm.pageNum"
      :total-items="total"
      :items-per-page="queryForm.pageSize"
      mode="simple"
      @change="getList"
      v-if="total > queryForm.pageSize"
    >
      <template #prev-text>
        <van-icon name="arrow-left" />
      </template>
      <template #next-text>
        <van-icon name="arrow" />
      </template>
      <template #page="{ text }">{{ text }}</template>
    </van-pagination>
    </footer>
  <van-action-sheet 
    v-model="show" 
    :actions="actions" 
    @select="onSelect"   
    close-on-click-action  
    cancel-text="取消"
  />
  </div>
</template>

<script>
import { mapState, mapGetters, mapActions } from "vuex";
import Vue from "vue";
import { Pagination, Icon, ActionSheet  } from "vant";
Vue.use(Icon);
Vue.use(Pagination);
Vue.use(ActionSheet);
Vue.use(ActionSheet);

export default {
  head() {
    return {
      title: "余额",
    };
  },
  data() {
    return {
        total: 100,
        queryForm: {
        pageNum: 1, //第几页
        pageSize: 4, // 容量
      },
      actions: [{ name: '全部' }, { name: '充值' }, { name: '支出' }],
      show: false,
      selected:{name:'全部'}
    };
  },
  components: {},
  computed: {
    ...mapGetters({
      userInfo: "authen/userInfo",
    }),
    ...mapState({
      // pointInfo: (state) => state.point.pointInfo,
    }),
  },
  mounted() {
    // this.getPointInfo();
  },
  methods: {
    ...mapActions({
      // getPointInfo: "point/getPointInfo",
    }),
    onSelect(q,w,e){
      console.log(q,w);
      this.selected= q
    },
    getList(){},
  },
};
</script>

<style lang="scss">
.order_index{
  padding: 0.4rem;
  padding-bottom: 0;
  width: 100vw;
  min-height:100vh;
  box-sizing: border-box;
  background-color: #f5f5f5;
  .top {
    background-color: #f8f8f8;
    overflow: hidden;
    padding: 0.2rem 0.25rem;
    display: flex;
    justify-content: space-between;
    text-align: center;
    .icon{
      margin-left:0.1rem;
      display: inline-block;
      width:0.2rem;
      height:0.15rem;
      background: url("../../../static/common/1_b01_down.2x.png") no-repeat 0 0;
      background-size: 100% 100%;
    }
  }
  .center{
    background-color:#ffffff;
    display: flex;
    flex-direction: column;
    >.item{
      height:1.9rem;
      padding:0.3rem 0.25rem;
      display:flex;
      justify-content:space-between;
      box-sizing: border-box;
      .left{
        width:70%;
        display:flex;
        flex-direction:column;
        .cont{
          color:#292929;
          font-size:0.26rem;
          font-weight: bold;
          height:0.9rem;
          line-height:0.9rem;
        }
        .time{
          color:#9f9f9f;
          font-size:0.2rem;
          height:0.4rem;
          line-height:0.4rem;
        }

      }
      .right{
        width:25%;
        text-align:right;
        line-height:1.3rem;
        font-size:0.26rem;
        font-weight:bold;
      }
      .add{
        color:#c5ac61;
      }
    }
    
    
  }
  .bottom {
    width: 100%;
  }
}
</style>
